<template>
  <div
    class="bargain_wrapper"
    v-if="attendInfo && bargain && logs && shareObject"
  >
    <!-- 活动规则 -->
    <div
      class="c-pa c-p-t20 c-p-r24 bargain_rule c-fc-white c-fs20"
      @click="showCoupon = true"
    >活动规则</div>
    <!-- top -->
    <div class="c-br16 c-bg-white c-ph20 c-pt64 c-pb60 bargain_con">
      <!-- 内容 -->
      <div class="c-flex-row c-pv20 c-ph18 c-bg-f6" @click="clickGoBarginDetail">
        <div class="c-ww180 c-maxh120 c-br8 c-p">
          <vip-custom-img
            :cover="bargain.cover"
            :imgClass="'c-w100 c-maxh120 c-br8'"
            :fontClass="{
              boxStyle: 'c-pt20 c-pb20 c-pl12',
              name: 'c-fs24 c-fw-b',
              duration: 'c-fs18'}"
            :content="{name: vipInfo.name, duration: vipInfo.duration, durationType: vipInfo.durationType}"
            v-if="bargain.cover && (bargain.cover.coverType ==1 || bargain.cover.coverType ==2)"
          />
          <img
            v-else
            class="c-w100 imgCloseBig c-maxh120 c-br8"
            :src="$addXossFilter(bargain.cover ? bargain.cover : (bargain.prodType == cfrom.vip ? require('@/assets/i/wap/course/vip.png') : (bargain.prodType == cfrom.svip ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png'))))"
          />
          <div class="c-pa c-p-b0 c-ww180 c-hh32 c-br-bl8 c-br-br8 c-fs20 c-fc-white c-bg-black5 c-flex-row c-flex-center">原价{{'￥' | iosPriceFilter}}{{bargain.prodPrice}}</div>
        </div>
        <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb">
          <div class="c-fs24 c-text-ellipsis1" :class="isColorName">{{cutstr(bargain.prodName, 24)}}</div>
          <div
            v-if="bargain.isLimitStock == 1"
            class="c-flex-row c-justify-center c-aligni-center c-ww100 c-hh28 c-mt10 c-mb12 c-br15 c-fc-white c-fs18 bargain_surplus"
            :class="isBg"
          >仅剩{{bargain.stock}}份</div>
          <div class="c-fs20 c-pr10 c-fc-gray" v-if="bargain.prodType == cfrom.activity || bargain.prodType == cfrom.shopping">{{!$isWxAppIos() ? '购买' : ''}}数量:<span class="c-fs24">{{selectNum}}</span></div>
          <div class="c-pr10 c-fc-gray c-mr12 c-fs20" v-if="bargain.prodType == cfrom.shopping && attendInfo && attendInfo.subSpecs">规格:{{attendInfo.subSpecs}}</div>
          <div class="c-flex-row c-aligni-center ">
            <div class="c-fs30" :class="isColor">
              <span class="c-fs20" v-if="bargain.prodType == cfrom.activity || bargain.prodType == cfrom.shopping">单{{bargain.prodType == cfrom.activity ? '张' : '件'}}</span>
              <span class="c-fs20">最低价</span>{{'￥' | iosPriceFilter}}{{bargain.reservePrice}}
            </div>
          </div>
        </div>
      </div>
      <div
        v-if="friendschop && attendInfo.status == 1 && attendInfo.helpPrice == null"
        class="c-fs28 c-fc-ff300c c-mt40 c-mb22 c-flex-row c-justify-center c-aligni-center c-fw500"
      >成功砍掉
        <span class="c-fs38">{{attendInfo.hadBargainPrice}}</span>元
      </div>
      <div
        v-if="friendschop && (isUser == 2) && attendInfo.helpPrice && attendInfo.status == 1"
        class="c-fs28 c-fc-ff300c c-mt40 c-mb22 c-flex-row c-justify-center c-aligni-center c-fw500"
      >我成功帮好友砍掉
        <span class="c-fs38">{{attendInfo.helpPrice}}</span>元
      </div>
      <div
        v-if="successBargain && (isUser == 1) && attendInfo.orderStatus == 1 && attendInfo.status == 2"
        class="c-fs28 c-fc-ff300c c-mt40 c-mb22 c-flex-row c-justify-center c-aligni-center c-fw500"
      >恭喜你砍价成功啦！</div>
      <div
        v-if="lowPrice && (isUser == 1) && attendInfo.orderStatus == 1 && attendInfo.status == 2"
        class="c-fs28 c-fc-ff300c c-mt40 c-mb22 c-flex-row c-justify-center c-aligni-center c-fw500"
      >您已中途下单！</div>
      <div
        v-if="lowPrice && (isUser == 2) && attendInfo.orderStatus == 1 && attendInfo.status == 2 && bargain.status == 2"
        class="c-fs28 c-fc-ff300c c-mt40 c-mb22 c-flex-row c-justify-center c-aligni-center c-fw500"
      >好友已中途下单，你也来参与吧！</div>
      <div
        v-if="successBargain && (isUser == 2) && attendInfo.orderStatus == 1 && attendInfo.status == 2 && bargain.status == 2"
        class="c-fs28 c-fc-ff300c c-mt40 c-mb22 c-flex-row c-justify-center c-aligni-center c-fw500"
      >好友已砍价购买，你也来参与吧！</div>
      <div
        v-if="(isUser == 2) && ordernow && attendInfo.orderStatus == 2 && attendInfo.status == 1 && bargain.status == 2"
        class="c-fs28 c-fc-ff300c c-mt40 c-mb22 c-flex-row c-justify-center c-aligni-center c-fw500"
      >已砍到最低价啦，你也来参与吧！</div>
      <div
        v-if="ordernow && (isUser == 1) && attendInfo.status == 1"
        class="c-fs28 c-fc-ff300c c-mt40 c-mb22 c-flex-row c-justify-center c-aligni-center c-fw500"
      >恭喜你，已砍至底价，赶紧下单吧！</div>
      <div
        v-if="(isUser == 1) && attendInfo.status == 2 && bargain.status == 2 && attendInfo.orderStatus == 2"
        class="c-fs28 c-fc-ff300c c-mt40 c-mb22 c-flex-row c-justify-center c-aligni-center c-fw500"
      >砍价已过期</div>
      <div
        v-if="(isUser == 2) && attendInfo.status == 2 && bargain.status == 2 && attendInfo.orderStatus == 2"
        class="c-fs28 c-fc-ff300c c-mt40 c-mb22 c-flex-row c-justify-center c-aligni-center c-fw500"
      >好友的砍价已过期，你也来参与吧！</div>
      <div
        v-if="bargain.status != 2 && attendInfo.orderStatus == 2 && ((bargain.isLimitStock == 1 && bargain.stock != 0) || bargain.isLimitStock == 2)"
        class="c-fs28 c-fc-ff300c c-mt40 c-mb22 c-flex-row c-justify-center c-aligni-center c-fw500"
      >活动已结束</div>
      <div
        v-if="bargain.status != 2 && (isUser == 2) && attendInfo.orderStatus == 1"
        class="c-fs28 c-fc-ff300c c-mt40 c-mb22 c-flex-row c-justify-center c-aligni-center c-fw500"
      >活动已结束,好友已砍价购买</div>
      <div
        v-if="bargain.status != 2 && bargain.isLimitStock == 1 && bargain.stock == 0 && attendInfo.orderStatus == 2"
        class="c-fs28 c-fc-ff300c c-mt40 c-mb22 c-flex-row c-justify-center c-aligni-center c-fw500"
      >活动已结束(商品已抢光)</div>
      <div class="c-fs22 c-fc-xblack c-textAlign-c c-fw400 c-flex-row c-justify-center c-aligni-center" v-if="attendInfo.status == 1">还剩
        <div class="c-ww32 c-hh32 c-lh32 c-bg-sblack c-fc-white c-br4 c-flex-row c-justify-center c-aligni-center c-mh8">{{d}}</div>天
        <div class="c-ww32 c-hh32 c-lh32 c-bg-sblack c-fc-white c-br4 c-flex-row c-justify-center c-aligni-center c-mh8">{{h}}</div>时
        <div class="c-ww32 c-hh32 c-lh32 c-bg-sblack c-fc-white c-br4 c-flex-row c-justify-center c-aligni-center c-mh8">{{m}}</div>分
        <div class="c-ww32 c-hh32 c-lh32 c-bg-sblack c-fc-white c-br4 c-flex-row c-justify-center c-aligni-center c-mh8">{{s}}</div>秒
        <div class="c-ww32 c-hh32 c-lh32 c-bg-xmlred c-fc-white c-br4 c-flex-row c-justify-center c-aligni-center c-mh8">{{hm}}</div>砍价结束
      </div>
      <!-- 进度条 -->
      <div class="bargain_progress">
        <div
          class="bargain_progress-bar"
          ref="progressbar"
          :style="{width: progress + '%'}"
        >
        </div>
      </div>
      <template v-if="cfrom.activity == bargain.prodType || cfrom.shopping == bargain.prodType">
        <div class="c-flex-row c-justify-sb c-fc-ff300c c-fs24 c-mt8">
          <span>{{'￥' | iosPriceFilter}}{{(bargain.prodPrice * selectNum).toFixed(2)}}</span>
          <span>{{'￥' | iosPriceFilter}}{{(bargain.reservePrice * selectNum).toFixed(2)}}</span>
        </div>
      </template>
      <template v-else>
        <div class="c-flex-row c-justify-sb c-fc-ff300c c-fs24 c-mt8">
          <span>{{'￥' | iosPriceFilter}}{{bargain.prodPrice}}</span>
          <span>{{'￥' | iosPriceFilter}}{{bargain.reservePrice}}</span>
        </div>
      </template>
      <!-- 按钮 -->
      <div
        class="c-flex-row c-justify-center c-aligni-center c-w100 c-hh64 c-mt40 c-fc-white c-fs28 bargain-btn"
        @click="handleClickshare"
        v-if="friendschop && (isUser == 1) && attendInfo.status == 1"
      >召唤好友帮砍</div>
      <div
        class="c-flex-row c-justify-center c-aligni-center c-w100 c-hh64 c-mt40 c-fc-white c-fs28 bargain-btn"
        @click="handleClickPoster"
        v-if="friendschop && (isUser == 1) && attendInfo.status == 1"
      >生成分享海报</div>
      <div
        v-if="attendInfo.orderStatus == 1 && (isUser == 1) && attendInfo.status == 2"
        @click="handleClickOrder"
        class="c-flex-row c-justify-center c-aligni-center c-w100 c-hh64 c-mt40 c-fc-white c-fs28 bargain-btn"
      >查看订单</div>
      <div
        class="c-flex-row c-justify-center c-aligni-center c-w100 c-hh64 c-mt40 c-fc-white c-fs28 bargain-btn"
        v-if="ordernow && (isUser == 1) && attendInfo.orderStatus == 2 && attendInfo.status == 1"
        @click="handleClickGoBuy"
      >立即下单</div>
      <div
        class="c-flex-row c-justify-center c-aligni-center c-w100 c-hh64 c-mt40 c-fc-ff300c c-fs28 bargain-btn-white"
        v-if="bargain.purchaseType == 2 && (isUser == 1) && attendInfo.status == 1 && friendschop"
        @click="handleClickGoBuy"
      >以当前价格下单</div>
      <div
        class="c-flex-row c-justify-center c-aligni-center c-w100 c-hh64 c-mt40 c-fc-white c-fs28 bargain-btn"
        v-if="(isUser == 2) && attendInfo.isHelpBargain == -1 && attendInfo.status == 1 && friendschop && bargain.status == 2"
        @click="handleClickFriend"
      >帮朋友砍一刀</div>
      <div
        class="c-flex-row c-justify-center c-aligni-center c-w100 c-hh64 c-mt40 c-fc-white c-fs28 bargain-btn"
        v-if="(isUser == 2) && attendInfo.status == 1 && attendInfo.isHelpBargain == 1 && bargain.status == 2 && friendschop && attendInfo.orderStatus == 2"
        @click="clickGoBarginDetail"
      >我也要砍价拿</div>
      <!-- 活动未结束 && 砍价未结束 && 已经帮砍 && 未到底价 && 未购买 -->
      <div
        class="c-flex-row c-justify-center c-aligni-center c-w100 c-hh64 c-mt40 c-fc-ff300c c-fs28 bargain-btn-white"
        v-if="(isUser == 2) && attendInfo.status == 1 && attendInfo.isHelpBargain == -1 && bargain.status == 2 && friendschop && attendInfo.orderStatus == 2"
        @click="clickGoBarginDetail"
      >我也要砍价拿</div>
      <div
        class="c-flex-row c-justify-center c-aligni-center c-w100 c-hh64 c-mt40 c-fc-white c-fs28 bargain-btn"
        v-if="(isUser == 2) && attendInfo.status == 1 && ordernow && bargain.status == 2 && attendInfo.orderStatus == 2"
        @click="clickGoBarginDetail"
      >我也要砍价拿</div>
      <!-- 活动未结束 && 砍价未结束 && 未下单 && 到底价 -->
      <div
        class="c-flex-row c-justify-center c-aligni-center c-w100 c-hh64 c-mt40 c-fs28"
        v-if="attendInfo.status == 2 && (isUser == 1)"
        :class="attendInfo.orderStatus == 1 ? 'bargain-btn-white c-fc-ff300c' : 'bargain-btn c-fc-white'"
        @click="handleClickBargainList"
      >去看看其他砍价商品</div>
      <div
        class="c-flex-row c-justify-center c-aligni-center c-w100 c-hh64 c-mt40 c-fc-white c-fs28 bargain-btn"
        v-if="bargain.status != 2 && (isUser == 2)"
        @click="handleClickBargainList"
      >去看看其他砍价商品</div>
      <div
        class="c-flex-row c-justify-center c-aligni-center c-w100 c-hh64 c-mt40 c-fc-white c-fs28 bargain-btn"
        v-if="(isUser == 2) && ordernow && attendInfo.orderStatus == 1 && attendInfo.status == 2 && bargain.status == 2"
        @click="clickGoBarginDetail"
      >我也要砍价拿</div>
      <!-- 砍价已结束 attendInfo.status = 2 && 活动未结束bargain.status = 2 && 已购买attendInfo.orderStatus = 1 -->
      <div
        class="c-flex-row c-justify-center c-aligni-center c-w100 c-hh64 c-mt40 c-fc-white c-fs28 bargain-btn"
        v-if="(isUser == 2) && attendInfo.orderStatus == 2 && attendInfo.status == 2 && bargain.status == 2 && friendschop"
        @click="clickGoBarginDetail"
      >我也要砍价拿</div>
      <!-- 砍价已结束 attendInfo.status = 2 &&  活动未结束bargain.status = 2 && 未购买attendInfo.orderStatus = 2 && 未到底价 -->
      <div
        class="c-flex-row c-justify-center c-aligni-center c-w100 c-hh64 c-mt40 c-fc-white c-fs28 bargain-btn"
        v-if="(isUser == 2) && attendInfo.orderStatus == 2 && attendInfo.status == 2 && bargain.status == 2 && ordernow"
        @click="clickGoBarginDetail"
      >我也要砍价拿</div>
      <!-- 砍价已结束 attendInfo.status = 2 &&  活动未结束bargain.status = 2 && 未购买attendInfo.orderStatus = 2 && 到底价 -->
      <div class="c-flex-row c-justify-center c-aligni-center c-w100 c-hh64 c-mt40 c-fc-white c-fs28 bargain-btn"
        v-if="lowPrice && (isUser == 2) && attendInfo.orderStatus == 1 && attendInfo.status == 2 && bargain.status == 2"
        @click="clickGoBarginDetail">我也要砍价拿</div>
    </div>
    <!-- 头像 -->
    <div class="bargain_head c-pa c-p-lp50 c-ww100 c-hh100 c-brp50">
      <img
        class="c-ww100 c-h c-brp50"
        :src="$addXossFilter(attendInfo.avatar, require('@/assets/defult_head.png'))"
        alt=""
      >
    </div>
    <!-- 砍价记录 -->
    <div class="bargain_record c-bg-white c-ph30 c-pt40 c-pb20">
      <div class="c-w100 c-hh32 c-mb20">
        <img
          class="c-w100"
          :src="require('@/assets/i/wap/bargain/record.png')"
          alt=""
        >
      </div>
      <!-- list -->
      <div
        class="bargain_record-list c-flex-column c-justify-center c-aligni-center"
        v-if="logs.length > 0"
      >
        <div
          class="c-flex-row c-justify-sb c-aligni-center c-w100 c-fs22 c-fc-xblack c-pv20"
          v-for="(item, index) in logs"
          :key="index"
        >
          <div class="c-flex-row c-w0 c-flex-grow1 c-justify-start c-aligni-center">
            <img
              class="c-ww60 c-hh60 c-brp50 c-mr16"
              :src="$addXossFilter(item.avatar, require('@/assets/defult_head.png'))"
              alt=""
            >
            <span class="c-text-ellipsis1">{{item.nickname}}</span>
          </div>
          <div class="c-flex-row c-justify-end c-aligni-center">
            <img
              class="c-ww30 c-hh34 c-mr10"
              :src="require('@/assets/i/wap/bargain/knife.png')"
              alt=""
            >
            <span>帮砍{{item.price}}元</span>
          </div>
        </div>
      </div>
      <div
        class="c-flex-row c-justify-center c-aligni-center c-fc-gray c-fs20 c-mt60"
        v-if="logs.length == 0"
      >暂无砍价记录</div>
    </div>
    <!-- 活动规则 -->
    <open-modal
      class="c-pz10000"
      :openModal='showCoupon'
      @closeModal='showCoupon = false'
    >
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-text-hidden c-pb20">
        <div class="c-p c-textAlign-c c-hh80 c-lh80">
          <span class="c-fs28 c-fw-b c-fc-xblack">玩法详情</span>
          <span
            @click="showCoupon = false"
            class="c-fs24 iconfont c-pa c-p-r24 c-p-b0"
          >&#xe61b;</span>
        </div>
        <div class="c-ph20 c-fs22 c-lh46">
          <p>1.活动期间消费者可邀请好友帮忙砍价，好友砍到底价后，即可按照底价购买商品；</p>
          <p>2.好友帮忙砍到底价后，消费者须在有效期内购买砍价商品，逾期商品将恢复原价；</p>
          <p>3.虚拟商品，同一用户仅可发起一次砍价活动享受优惠价格；实体商品，同一用户可根据商家设置发起一次或多次砍价活动享受优惠价格；</p>
          <p>4.同一商品，同一用户仅能帮好友砍价一次；</p>
          <p>5.砍价商品不与其他活动/优惠福利同享；</p>
          <p>6.砍价商品数量有限，商品售罄后，商品将无法购买，即使你已经发起砍价;</p>
          <p>7.砍价活动不参与赠送礼品活动。</p>
        </div>
        <div class="c-ph20">
          <div
            @click="showCoupon = false"
            class="c-flex-row c-justify-center c-aligni-center c-w100 c-hh64 c-mt20 c-fc-white c-fs28 bargain-btn"
          >我知道了</div>
        </div>
      </div>
    </open-modal>
    <!-- 分享 -->
    <share-masker
      :isShowShare="isShowShare"
      v-if="isShowShare"
      @closeShare="isShowShare=false;"
    ></share-masker>
    <!-- 分享海报  -->
    <div
      class="c-w100 c-h c-pf c-p-t0 c-p-b0 c-p-l999999"
    >
      <div class="c-flex-row c-justify-center shareposter" id="canvasSharePoster">
        <img class="share-img" :src="$addXossFilter('https://ckjr-static-assets.oss-cn-shanghai.aliyuncs.com/assets/img/public/bargin-share-post.png')" alt="">
        <!-- 头像 -->
        <div class="share-head c-pa c-p-lp50 c-ww100 c-hh100 c-brp50">
          <img
            class="c-ww100 c-h c-brp50"
            :src="$addXossFilter(shareObject.avatar, require('@/assets/defult_head.png'))"
            alt=""
          >
        </div>
        <!-- name -->
        <div class="share-name c-text-ellipsis1">{{shareObject.nickname}}</div>
        <!-- con -->
        <div class="c-flex-row c-pv14 c-ph10 share-con">
          <div class="c-ww156 c-maxh104 c-br8 c-p">
            <vip-custom-img
              class="vipCustomImg"
              :cover="bargain.cover"
              :imgClass="'c-w100 c-maxh104 c-br8'"
              :fontClass="{
                boxStyle: 'c-pt20 c-pb20 c-pl12',
                name: 'c-fs24 c-fw-b',
                duration: 'c-fs18'}"
              :content="{name: vipInfo.name, duration: vipInfo.duration, durationType: vipInfo.durationType}"
              v-if="bargain.cover && (bargain.cover.coverType ==1 || bargain.cover.coverType ==2)"
            />
            <img
              v-else
              class="c-w100 imgCloseBig c-maxh104 c-br8"
              :src="$addXossFilter(bargain.cover ? bargain.cover : (bargain.prodType == cfrom.vip ? require('@/assets/i/wap/course/vip.png') : (bargain.prodType == cfrom.svip ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png'))))"
            />
            <div class="c-pa c-p-b0 c-ww156 c-hh32 c-br-bl8 c-br-br8 c-fs20 c-fc-white c-bg-black5 c-flex-row c-flex-center">原价{{'￥' | iosPriceFilter}}{{bargain.prodPrice}}</div>
          </div>
          <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb">
            <div class="c-fs24 c-fc-xblack c-text-ellipsis1">{{cutstr(bargain.prodName, 16)}}</div>
            <div class="c-flex-row c-aligni-center" v-if="bargain.prodType == cfrom.activity || bargain.prodType == cfrom.shopping">
              <div class="c-pr10 c-flex-row c-aligni-center c-justify-center c-fc-gray">
                <span class="c-fs18">{{!$isWxAppIos() ? '购买' : ''}}数量:</span>
                <span class="c-fs20">{{selectNum}}</span>
              </div>
            </div>
            <div class="c-pr10 c-fc-gray c-mr12 c-fs20" v-if="bargain.prodType == cfrom.shopping && attendInfo && attendInfo.subSpecs">规格:{{attendInfo.subSpecs}}</div>
            <div class="c-flex-row c-aligni-center">
              <span class="c-fc-ff300c c-fs18" v-if="bargain.prodType == cfrom.activity || bargain.prodType == cfrom.shopping">单{{bargain.prodType == cfrom.activity ? '张' : '件'}}</span>
              <div class="c-fc-ff300c c-fs22 c-pr10">{{'￥' | iosPriceFilter}}{{bargain.reservePrice}}</div>
            </div>
          </div>
        </div>
        <!-- 二维码 -->
        <div class="share-qrcode">
          <img
            :src="$addXossFilter(qrcodeImg)"
            alt=""
          >
          <div class="share-qrcodeName">长按扫码帮朋友砍价</div>
        </div>
      </div>

    </div>
    <!-- 图片 -->
    <div class="c-w100 c-h c-pf c-p-t0 c-p-l0 c-p-b0 c-p-r0 c-translucent-balck50 c-pz6" v-show="shareposter">
      <div id="spreadImg" class="width-540rem height-750rem c-br20"></div>
    </div>
    <!-- 砍价成功 -->
    <div
      class="c-w100 c-h c-pf c-p-t0 c-p-l0 c-p-b0 c-p-r0 c-translucent-balck50 c-pz6"
      v-show="bargainSuccess"
    >
      <div class="c-flex-row c-justify-center bargainSuccess">
        <div class="bargain-success_name">感谢老铁，帮我砍了
          <span>{{pricefriend}}</span>元
        </div>
        <div
          class="bargainsuccess-btn"
          @click="bargainSuccess = false"
        >确定</div>
      </div>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import OpenModal from "@/components/templates/common/openModal.vue";
import shareMasker from "@/components/templates/common/shareMasker.vue";
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
import { checkEnableModule } from "@/utils/checkEnableModuleUtil.js";
import { goDetails } from "@/utils/goDetails.js";
let timeFunction = null;
export default {
  name: "BargainDetail",
  components: {
    OpenModal,
    shareMasker,
    VipCustomImg
  },
  data() {
    return {
      cfrom: global.ckFrom,
      bargainId: '', //砍价活动Id
      attendId: '', //活动参与id
      attendInfo: null,
      bargain: null,
      logs: [],
      shareObject: null,
      showCoupon: false,
      d: '', //天
      h: '', //时
      m: '', //分
      s: '', //秒
      hm: '', //毫秒
      isShowShare: false,
      shareposter: false,
      bargainSuccess: false,
      qrcodeImg: '',
      userId: localStorage.getItem("userId") || '',
      encodeUserId: '',
      pricefriend: '', //帮砍金额
      endTime: '',
      vipInfo: '',
      clickFlage: true,
      ckFrom: '',
      attendNo: '',
      selectNum: 1,
      activityEnrollInfo: JSON.parse(localStorage.getItem("activityEnrollInfo")), //活动报名表单信息
      goods: null, // 砍价商品信息
    }
  },
  activated() {
    setDocumentTitle("砍价购");
    this.initData();
  },
  deactivated() {
    clearInterval(timeFunction);
  },
  created() {
    utilJs.appShare(this);
  },
  computed: {
    isBg() {
      // 砍价结束 || 整个活动结束 || 下单成功
      let isBg = this.attendInfo.status == 2 || (this.bargain.status == 3 || this.bargain.status == 4) || this.attendInfo.orderStatus == 1 ? 'c-bg-gray' : 'c-bg-ff300c-linear';
      return isBg;
    },
    isColor() {
      let isColor = this.attendInfo.status == 2 || (this.bargain.status == 3 || this.bargain.status == 4) || this.attendInfo.orderStatus == 1 ? 'c-fc-gray' : 'c-fc-ff300c';
      return isColor;
    },
    isColorName() {
      let isColorName = this.attendInfo.status == 2 || (this.bargain.status == 3 || this.bargain.status == 4) || this.attendInfo.orderStatus == 1 ? 'c-fc-gray' : 'c-fc-xblack';
      return isColorName;
    },
    ordernow() {
      // 砍到最低价才可购买 && 等于对当前最低价
      let showOrder = '';
      if (this.bargain.prodType == this.cfrom.activity || this.bargain.prodType == this.cfrom.shopping) {
        showOrder = (this.Subtr(this.bargain.price * this.selectNum, this.attendInfo.hadBargainPrice) == this.bargain.reservePrice * this.selectNum);
      } else {
        showOrder = (this.Subtr(this.bargain.price, this.attendInfo.hadBargainPrice) == this.bargain.reservePrice);
      }
      return showOrder;
    },
    lowPrice() {
      // 已下单 && 未到最低价
      let lowPrice = '';
      if (this.bargain.prodType == this.cfrom.activity || this.bargain.prodType == this.cfrom.shopping) {
        lowPrice = this.attendInfo.orderStatus == 1 && (this.Subtr(this.bargain.price * this.selectNum, this.attendInfo.hadBargainPrice) != this.bargain.reservePrice * this.selectNum);
      } else {
        lowPrice = this.attendInfo.orderStatus == 1 && (this.Subtr(this.bargain.price, this.attendInfo.hadBargainPrice) != this.bargain.reservePrice);
      }
      return lowPrice;
    },
    friendschop() {
      // 最低价前均可购买 && 不等于当前最低价
      let friendschop = '';
      if (this.bargain.prodType == this.cfrom.activity || this.bargain.prodType == this.cfrom.shopping) {
        friendschop = this.attendInfo.orderStatus == 2 && (this.Subtr(this.bargain.price * this.selectNum, this.attendInfo.hadBargainPrice) != this.bargain.reservePrice * this.selectNum);
      } else {
        friendschop = this.attendInfo.orderStatus == 2 && (this.Subtr(this.bargain.price, this.attendInfo.hadBargainPrice) != this.bargain.reservePrice);
      }
      return friendschop;
    },
    successBargain() {
      // 等于对当前最低价标识砍价成功
      let success = '';
      if (this.bargain.prodType == this.cfrom.activity || this.bargain.prodType == this.cfrom.shopping) {
        success = this.Subtr(this.bargain.price * this.selectNum, this.attendInfo.hadBargainPrice) == this.bargain.reservePrice * this.selectNum;
      } else {
        success = this.Subtr(this.bargain.price, this.attendInfo.hadBargainPrice) == this.bargain.reservePrice;
      }
      return success;
    },
    isUser() {
      // 判断是发起人还是砍价人 1 发起人  2 砍价人
      let isUser = this.userId == this.encodeUserId ? 1 : 2;
      return isUser;
    },
    progress() {
      let percentage = '';
      if (this.bargain.prodType == this.cfrom.activity || this.bargain.prodType == this.cfrom.shopping) {
        percentage = (this.attendInfo.hadBargainPrice / (this.bargain.price * this.selectNum - this.bargain.reservePrice * this.selectNum)) * 100;
      } else {
        percentage = (this.attendInfo.hadBargainPrice / (this.bargain.price - this.bargain.reservePrice)) * 100;
      }
      return percentage;
    },
    cutstr() {
      return function (str, len) {
        var strLength = 0;
        var strLen = 0;
        var strCut = '';
        var a;
        strLen = str.length;
        for (var i = 0; i < strLen; i++) {
          a = str.charAt(i);
          strLength++;
          if (escape(a).length > 4) {
            strLength++
          }
          strCut = strCut.concat(a);
          if (strLength >= len) {
            strCut = strCut.concat("...");
            return strCut;
          }
        }
        if (strLength < len) {
          return str;
        }
      }
    },
  },
  mounted() {
    import(/* webpackChunkName: "html2canvas" */"@/utils/html2canvas.js").then(res => {
      this.html2canvas = res.default;
      // this.getSpreadInfo();
    })
  },
  methods: {
    initData() {
      this.bargainId = this.$route.query.bargainId;
      this.attendId = this.$route.query.attendId || '';
      this.selectNum = this.$route.query.number || 1;
      this.ckFrom = this.$route.query.ckFrom || '';
      if ((this.ckFrom == this.cfrom.shopping) && (!checkEnableModule(this.cfrom.mall, this))) {
        return;
      }
      this.attendNo = this.$route.query.attendNo || '';
      this.activityEnrollInfo = this.attendId == '' ? JSON.parse(localStorage.getItem("activityEnrollInfo")) : '';
      this.attendInfo = null;
      this.bargain = null;
      this.shareObject = null;
      this.logs = [];
      this.encodeUserId = '';
      this.showCoupon = false;
      this.clickFlage = true;
      this.vipInfo = '';
      this.d = '';
      this.h = '';
      this.m = '';
      this.s = '';
      this.hm = '';
      this.qrcodeImg = '';
      this.endTime = '';
      this.isShowShare = false;
      this.shareposter = false;
      this.bargainSuccess = false;
      this.pricefriend = '';
      clearInterval(timeFunction);
      this.userAttendBargain();
    },
    // 处理js相减精度问题
    Subtr(arg1, arg2) {
      var r1, r2, m, n;
      try {
        r1 = arg1.toString().split(".")[1].length
      } catch (e) {
        r1 = 0
      }
      try {
        r2 = arg2.toString().split(".")[1].length
      } catch (e) {
        r2 = 0
      }
      m = Math.pow(10, Math.max(r1, r2));
      n = (r1 >= r2) ? r1 : r2;
      return ((arg1 * m - arg2 * m) / m).toFixed(n);
    },
    clickGoBarginDetail() {
      let query = {}
      if (this.bargain.prodType == this.cfrom.vip || this.bargain.prodType == this.cfrom.svip) {
        query.isBargain = true;
      }
      let prodId = this.bargain.prodType == this.cfrom.activity ? this.bargain.extraId : this.bargain.prodId
      goDetails(this, this.bargain.prodType, prodId, query, (this.bargain.courseType || 0));
    },
    // 砍价列表
    handleClickBargainList() {
      let pushUrl = `/homePage/bargain/bargainList${this.bargain.prodType == 12 ? "?prodType=12" : ""}`;
      this.iosAppRouteChange(pushUrl);
    },
    // 查看订单
    handleClickOrder() {
      let pushUrl = '/member/myOrder/allOrderList';
      this.iosAppRouteChange(pushUrl);
    },
    // 下单
    handleClickGoBuy() {
      if (this.bargain.prodType == this.cfrom.vip || this.bargain.prodType == this.cfrom.svip) {
        let pathQuery = {
          prodId: this.bargain.prodId,
          type: this.bargain.prodType,
          attendId: this.attendInfo.attendId
        }
        this.$routerGo(this, "push", {
          path: "/member/vip/vipBuy",
          query: pathQuery
        });
      } else if (this.bargain.prodType == this.cfrom.shopping) {
        let info = {
          mgId: this.goods.mgId,
          mcId: this.goods.mcId,
          avatar: this.goods.avatar,
          minOrderQuantity: this.goods.minOrderQuantity,
          pointsDeduct: 0, //限时购不能使用积分
          isMail: this.goods.isMail,
          name: this.goods.name,
          price: this.successBargain && (this.isUser == 1) && this.attendInfo.orderStatus == 1 && this.attendInfo.status == 2 ? this.bargain.reservePrice : this.goods.price,
          originalPrice: this.goods.originalPrice,
          quantity: Number(this.selectNum),
          shopSpecInfo: this.attendInfo.subSpecs || "",
          gsiiId: this.$route.query.gsiiId || this.attendInfo.extId,
          postage: this.goods.postage,
          stock: this.attendInfo.number,
          salesStock: '',
          salesLimt: 0,
          freeShipping: this.freeShipping,
          isFlashSales: false,
          pId: this.attendInfo.attendId,
          noLimit: false,
          vipDiscount: this.goods.vipDiscount,
          svipDiscount: this.goods.svipDiscount,
          agentDiscount: this.goods.agentDiscount,
          partnerDiscount: this.goods.partnerDiscount,
          branchDiscount: this.goods.branchDiscount,
          cooDiscount: this.goods.cooDiscount,
          agencyDiscount: this.goods.agencyDiscount,
          agent6Discount: this.goods.agent6Discount,
          agent7Discount: this.goods.agent7Discount,
          agent8Discount: this.goods.agent8Discount,
          agent9Discount: this.goods.agent9Discount,
          isMallExpressDeliver: this.goods.isMallExpressDeliver,
          isMallOfflineDeliver: this.goods.isMallOfflineDeliver,
          givenPoints: this.goods.givenPoints && this.goods.givenPoints > 0 ? this.goods.givenPoints : 0,
          modGroup: this.goods.modGroup,
          limitType: this.goods.limitType,
          limitNumber: this.goods.limitNumber,
          purchasedNum: this.goods.purchasedNum,
          isLimitAssignUser: this.goods.isLimitAssignUser,
          relData: this.goods.relData,
          totalHadBargainPrice: this.attendInfo.hadBargainPrice
        };
        if (this.goods.valuationMethod && this.goods.valuationMethod == 2 && this.goods.freightMode == 1) {
          info.valuationMethod = this.goods.valuationMethod;
        }
        let shopBuyInfo = [];
        shopBuyInfo.push(info);
        sessionStorage.setItem("shopBuyInfo", JSON.stringify(shopBuyInfo));
        let pathQuery = {
          shopNo: this.bargain.prodId,
          orderType: 512
        }
        this.$routerGo(this, "push", {
          path: "/mall/shopSettlement/shopSettlement",
          query: pathQuery
        });
      } else {
        let pathQuery = {
          cId: this.bargain.prodId,
          extId: this.bargain.prodId,
          ckFrom: this.bargain.prodType,
          attendId: this.attendInfo.attendId
        }
        if (this.bargain.prodType == this.cfrom.activity) {
          localStorage.setItem(
            "activityEnrollInfo",
            JSON.stringify({
              activityId: this.bargain.extraId,
              actTicketId: this.bargain.prodId,
              infoArr: this.activityEnrollInfo.infoArr,
              identCode: this.activityEnrollInfo.identCode
            })
          );
          pathQuery.selectNum = this.selectNum;
          pathQuery.activityId = this.bargain.extraId;
          pathQuery.isFromOrder = "TRUE";
          pathQuery.refereeId = this.$route.query.refereeId ? this.$route.query.refereeId : ''
        }
        if (this.bargain.prodType == this.cfrom.course) {
          pathQuery.courseType = this.bargain.courseType;
        }
        this.$routerGo(this, "push", { path: '/homePage/course/coursePay', query: pathQuery });
      }
    },
    // 分享海报
    handleClickPoster() {
      let _this = this;
      let shareposter = document.getElementById("canvasSharePoster");
      this.$loading.show({
        text: "分享海报生成中"
      });
      this.html2canvas(shareposter, {
        useCORS: true,
        backgroundColor: 'transparent',
        height: shareposter.offsetHeight, // 解决当前页面生成图片出现白边问题
        width: shareposter.offsetWidth,
      }).then(canvas => {// eslint-disable-line
        // document.body.appendChild(canvas);
        let ctx = canvas.getContext("2d");
        this.canvasToImage(ctx);
        let shareClose = document.getElementById('shareClose');
        shareClose.removeEventListener('click', function () { });
        shareClose.addEventListener("click", function () {
          _this.shareposter = false;
        })
        this.shareposter = true;
      });
    },
    canvasToImage(ctx) {
      try {
        // let dataURL = ctx.canvas.toDataURL("image/jpg");
        let dataURL = ctx.canvas.toDataURL("image/png?x-oss-process=style/common");
        document.getElementById("spreadImg").innerHTML = '';
        document.getElementById("spreadImg").innerHTML = '<div id="shareClose" style="top:-0.5rem;right:-0.7rem;" class="share-close c-pa iconfont icon-buoumaotubiao20 c-fc-white c-fs50"></div><img src="' + dataURL + '" class="width-540rem height-750rem c-br20 app-save-img" alt><div class="c-pa c-p-tl50 c-fs28 c-fc-white" style="transform:translateX(-50%);">长按保存图片</div>'
        this.$loading.hide();
      } catch (err) {
        this.$loading.hide();
        console.log(err.message);
        console.log(err.stack);
      }
    },
    handleClickshare() {
      this.isShowShare = true;
    },
    timeTo(time) {
      let t = new Date(time).getTime(); //取得指定时间得总毫秒数
      let n = new Date().getTime(); //取得当前毫秒数
      let c = t - n; //时间差
      if (c <= 0) {
        clearInterval(timeFunction);
        this.d = 0;
        this.h = 0;
        this.m = 0;
        this.s = 0;
        this.hm = 0;
        this.userAttendBargain();
        return
      }
      let d = parseInt(c / 1000 / 60 / 60 / 24);
      let h = parseInt(c / 1000 / 60 / 60 - (24 * d));
      let m = parseInt(c / 1000 / 60 - (24 * 60 * d) - (60 * h));
      let s = parseInt(c / 1000 - (24 * 60 * 60 * d) - (60 * 60 * h) - (60 * m));
      let hm = Math.floor((c - (24 * 60 * 60 * 1000 * d) - (60 * 60 * 1000 * h) - (60 * 1000 * m) - (s * 1000)) / 100);
      // if (hm < 10) {
      //   hm = "0" + hm;
      // }
      if (s < 10) {
        s = "0" + s;
      }
      if (m < 10) {
        m = "0" + m;
      }
      if (h < 10) {
        h = "0" + h;
      }
      this.d = d;
      this.h = h;
      this.m = m;
      this.s = s;
      this.hm = hm;
    },
    handleClickFriend() {
      if (this.clickFlage) {
        this.clickFlage = false;
        this.helpFriendBargain();
      }
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    // 帮好友砍一刀
    helpFriendBargain() {
      utilJs.postMethod(`${global.apiurl}bargains/helpFriendBargain`, { attendId: this.attendId }, res => {
        this.pricefriend = res.price;
        this.bargainSuccess = true;
        this.userAttendBargain();
      }, failRes => {
        this.initData();
      })
    },
    userAttendBargain() {
      let identCode = '';
      let infoArr = [];
      if (this.activityEnrollInfo && (this.ckFrom == this.cfrom.activity)) {
        identCode = this.activityEnrollInfo.identCode;
        infoArr = this.activityEnrollInfo.infoArr;
      } else {
        identCode = '';
        infoArr = [];
      }
      let data = { bargainId: this.bargainId, attendId: this.attendId, number: this.selectNum, attendNo: this.attendNo, identCode: identCode, infoArr: infoArr };
      if (this.$route.query.gsiiId) {
        data.extId = this.$route.query.gsiiId,
        data.number = this.selectNum
      }
      utilJs.postMethod(`${global.apiurl}bargains/userAttendBargain`, data, res => {
        this.attendInfo = res.attendInfo;
        this.bargain = res.bargain;
        this.logs = res.logs;
        this.attendId = res.attendInfo.attendId;
        this.encodeUserId = res.attendInfo.encodeUserId;
        this.endTime = res.attendInfo.endTime;
        this.vipInfo = res.bargain.vipInfo;
        this.clickFlage = true;
        this.activityEnrollInfo = res.attendInfo.activityInfo || JSON.parse(localStorage.getItem("activityEnrollInfo"));
        this.goods = res.goods || null;
        if (res.goods) {
          this.freeShipping = res.freeShipping;
        }
        this.selectNum = res.attendInfo && res.attendInfo.number ? res.attendInfo.number : this.selectNum;
        clearInterval(timeFunction);
        if (res.attendInfo.status == 1) {
          timeFunction = setInterval(() => {
            this.timeTo(res.attendInfo.endTime.replace(/\-/g, "/"))
          })
        } else {
          clearInterval(timeFunction);
        }
        this.getShareBargain(res.attendInfo.attendId)
        this.wechatShare();
      }, failRes => {
        this.$router.go(-1);
      })
    },
    getShareBargain(attendId) {
      utilJs.getMethod(`${global.apiurl}bargains/getShareBargain/${attendId}`,
        res => {
          this.shareObject = res;
          this.qrcodeImg = "data:image/svg+xml;base64," + window.btoa(decodeURIComponent(encodeURIComponent(res.qrcodeUrl)))
        }, failRes => { })
    },
    wechatShare: function () {
      let shareDesc = '';
      let title = this.bargain.title;
      let shareImg = '';
      let shareUrl = '';
      if (this.vipInfo && this.vipInfo.cover) {
        if (this.vipInfo.cover.coverType == 2 && this.vipInfo.cover.coverUrl) {
          shareImg = this.vipInfo.cover.coverUrl;
        } else if (this.vipInfo.cover && this.vipInfo.cover.coverType == 1 && this.vipInfo.cover.coverUrl) {
          shareImg = `${window.location.protocol}//${window.location.hostname}/static/i/wap/vip/vip-bg-mb${this.vipInfo.cover.coverUrl}.png`;
        } else {
          if (this.bargain.prodType == this.cfrom.vip) {
            shareImg = require('../../../assets/i/wap/course/vip.png')
          } else if (this.bargain.prodType == this.cfrom.svip) {
            shareImg = require('../../../assets/i/wap/course/svip.png')
          }
        }
      } else {
        shareImg = this.bargain.cover;
      }
      if (this.cfrom.activity == this.bargain.prodType) {
        shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?bargainId=${this.bargainId}&attendId=${this.attendId}&number=${this.selectNum}&ckFrom=${this.ckFrom}&attendNo=${this.attendNo}&refereeId=${localStorage.getItem("userId")}`;
      } else {
        shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?bargainId=${this.bargainId}&attendId=${this.attendId}&refereeId=${localStorage.getItem("userId")}`;
      }
      if (this.isUser == 1) {
        shareDesc = this.bargain.shareDesc || "亲们帮帮忙，快来帮我砍价，就差你一个啦。";
      } else {
        shareDesc = "亲们帮帮忙，快来帮我的好友砍个价，就差你一个啦。";
      }
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc);
    },
    appShare: function () {
      let shareDesc = '';
      let title = this.bargain.title;
      let shareImg = '';
      let shareUrl = '';
      if (this.vipInfo && this.vipInfo.cover) {
        if (this.vipInfo.cover.coverType == 2 && this.vipInfo.cover.coverUrl) {
          shareImg = this.vipInfo.cover.coverUrl;
        } else if (this.vipInfo.cover && this.vipInfo.cover.coverType == 1 && this.vipInfo.cover.coverUrl) {
          shareImg = `${window.location.protocol}//${window.location.hostname}/static/i/wap/vip/vip-bg-mb${this.vipInfo.cover.coverUrl}.png`;
        } else {
          if (this.bargain.prodType == this.cfrom.vip) {
            shareImg = require('../../../assets/i/wap/course/vip.png')
          } else if (this.bargain.prodType == this.cfrom.svip) {
            shareImg = require('../../../assets/i/wap/course/svip.png')
          }
        }
      } else {
        shareImg = this.bargain.cover;
      }
      if (this.cfrom.activity == this.bargain.prodType) {
        shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?bargainId=${this.bargainId}&attendId=${this.attendId}&number=${this.selectNum}&ckFrom=${this.ckFrom}&attendNo=${this.attendNo}&refereeId=${localStorage.getItem("userId")}`;
      } else {
        shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?bargainId=${this.bargainId}&attendId=${this.attendId}&refereeId=${localStorage.getItem("userId")}`;
      }
      if (this.isUser == 1) {
        shareDesc = this.bargain.shareDesc || "亲们帮帮忙，快来帮我砍价，就差你一个啦。";
      } else {
        shareDesc = "亲们帮帮忙，快来帮我的好友砍个价，就差你一个啦。";
      }
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
  }
}
</script>

<style lang="less" scoped>
.bargain_wrapper {
  position: relative;
  padding-top: 2.5rem;
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/bargain/bargain_banner.png") no-repeat
    top center;
  background-size: contain;
  // 活动规则
  .bargain_rule {
    width: 2.8rem;
    height: 1rem;
    text-align: center;
    line-height: 1rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0.5rem;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
  }
  // top
  .bargain_con {
    width: 14.8rem;
    min-height: 16.15rem;
    margin: 0 auto;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  }
  .bargain_head {
    top: 1.4rem;
    transform: translateX(-50%);
    border: 0.1rem solid #fff;
    z-index: 1;
  }
  // 砍价记录
  .bargain_record {
    width: 14.8rem;
    min-height: 11.75rem;
    margin: 0.5rem auto 0;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  }
}
// 进度条
.bargain_progress {
  position: relative;
  height: 0.3rem;
  border-radius: 0.25rem;
  margin-top: 2.1rem;
  background: #f2f2f2;
  .bargain_progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    max-width: 100%;
    height: 0.3rem;
    border-radius: 0.25rem;
    text-align: right;
    transition: all 0.3s;
    background: linear-gradient(90deg, rgba(255, 48, 12, 0.7), #ff300c);
    .bargain_progress-text {
      display: inline-block;
      position: relative;
      top: -1.4rem;
      width: 2.35rem;
      height: 0.85rem;
      text-align: center;
      color: #fff;
      font-size: 0.5rem;
      background: url("../../../assets/i/wap/bargain/bargain-text.png")
        no-repeat center center;
      background-size: cover;
    }
  }
}
.c-fc-ff300c {
  color: #ff300c;
}
.c-bg-ff300c-linear {
  background: linear-gradient(90deg, #ff300c, rgba(255, 48, 12, 0.7));
}
.c-mh8 {
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}
.bargain-btn {
  background: linear-gradient(90deg, #ff300c, rgba(255, 48, 12, 0.7));
  border-radius: 0.75rem;
  box-shadow: 0px 6px 20px 0px rgba(255, 48, 12, 0.3);
}
.bargain-btn-white {
  border: 0.05rem solid #ff300b;
  border-radius: 0.75rem;
}
.width-540rem {
  width: 13.5rem;
}
.height-750rem {
  height: 20rem;
}
.shareposter {
  position: relative;
  width: 13.5rem;
  height: 20rem;
  background-size: contain;
  .share-img {
    position: absolute;
    top: 1.5rem;
    left: 0;
    width: 100%;
  }
  .share-close {
    top: -1.85rem;
    right: -0.55rem;
  }
  .share-head {
    top: 0rem;
    transform: translateX(-50%);
    border: 0.1rem solid #fff;
    z-index: 1;
  }
  .share-name {
    position: absolute;
    top: 3rem;
    left: 50%;
    width: 6rem;
    text-align: center;
    transform: translateX(-50%);
    color: #ffffff;
    font-size: 0.55rem;
  }
  .share-con {
    position: absolute;
    top: 6.6rem;
    left: 50%;
    width: 10.3rem;
    transform: translateX(-50%);
    background: #fff3e2;
    border-radius: 0.1rem;
  }
  .share-qrcode {
    position: absolute;
    bottom: 1.55rem;
    left: 50%;
    transform: translateX(-50%);
    img {
      width: 3.5rem;
      height: 3.5rem;
      background: #ffffff;
      border: 0.1rem solid #ffffff;
      border-radius: 0.2rem;
      margin: 0 auto;
    }
    .share-qrcodeName {
      color: #fdf0c8;
      font-size: 0.55rem;
      margin-top: 0.75rem;
    }
  }
}
#spreadImg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .share-close {
    top: -0.5rem;
    right: -0.7rem;
  }
}
.bargainSuccess {
  position: relative;
  top: 50%;
  left: 50%;
  width: 13.5rem;
  height: 15.95rem;
  margin-top: -7.975rem;
  transform: translateX(-50%);
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/bargain/bargain-success.png") no-repeat
    center center;
  background-size: contain;
  .bargain-success_name {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 8.55rem;
    left: 50%;
    width: 14.5rem;
    text-align: center;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: #593613;
    font-weight: bold;
    span {
      font-size: 1.2rem;
      color: #e64e4d;
    }
  }
  .bargainsuccess-btn {
    position: absolute;
    top: 11.3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 11rem;
    height: 1.6rem;
    line-height: 1.6rem;
    background: linear-gradient(90deg, #ff300c, rgba(255, 48, 12, 0.7));
    border-radius: 1.15rem;
    text-align: center;
    color: #fff;
    font-size: .7rem;
  }
}
.c-ww156 {
  width: 3.9rem;
}
.c-maxh104 {
  max-height: 2.6rem;
}
.c-pv14 {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
/deep/ .vipCustomImg .c-maxh104 {
  max-height: 2.6rem;
}
.c-bg-black5 {
  background: rgba(0, 0, 0, .5);
}
</style>